<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位模式</title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box1{
			position: relative;
			top: 50px;
			left: 150px;
			left: 200px;
			top: 100px;
			width: 600px;
			height: 600px;
			background-color: hotpink;
		}
		.box2{
		/* 	position: relative; */
		position: absolute;
			top: 50px;
			left: 150px;
			width: 200px;
			height: 200px;
			background-color: lightblue;
			 z-index: 1;/* 层叠等级属性，用于调整重叠定位元素的堆叠顺序，
			 取值可为正整数，负整数和0*/
		}
		.box3{
			width: 150px;
			height: 200px;
			background-color: aquamarine;
		}
		</style>
	</head>
	<body>
		<!-- 定位：position
		1.定位模式
		静态定位static，默认自己的定位方式；
		相对定位relative，相对于自己的位置进行偏移
		不会脱离标准流！
		绝对定位absolute，相对于有定位的父盒子进行偏移，如果父盒子都没有定位，那么就相对于body(网页)进行偏移
		会脱离标准流！
		固定定位fixed，相对于body(网页)进行偏移。位置固定不动
		经典的应用：
		大相小绝（父相子绝）
		2.偏移量：
		top上，bottom下，left左，right右 -->
		
		 <div class="box1">
			 <div class="box2"></div>
			 <div class="box3"></div>
		 </div>
	</body>
</html>
